import React from 'react'


import {
    Dimensions,
    Image,
    NativeModules,
    Platform,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    DeviceEventEmitter,
    View, AsyncStorage, Alert
} from 'react-native';
import BasePage from './Component/Common/BasePage';
import {NavigationBar} from 'teaset';
import CommonStyle from "./Component/CommonStyle";

import SQLite from './SQLite';
import AllPage from './AllPage'
import PageView from "./Component/Common/PageView";
import AddPage from "./AddPage";

var sqLite = new SQLite();
var db;

const defaultOptions = {
    imageCount: 1,             // 最大选择图片数目，默认6
    isRecordSelected: false,   // 是否已选图片
    isCamera: true,            // 是否允许用户在内部拍照，默认true
    isCrop: true,             // 是否允许裁剪，默认false, imageCount 为1才生效
    CropW: ~~(width * 0.6),    // 裁剪宽度，默认屏幕宽度60%
    CropH: ~~(width * 0.6),    // 裁剪高度，默认屏幕宽度60%
    isGif: false,              // 是否允许选择GIF，默认false，暂无回调GIF数据
    showCropCircle: true,     // 是否显示圆形裁剪区域，默认false
    circleCropRadius: width / 2, // 圆形裁剪半径，默认屏幕宽度一半
    showCropFrame: true,       // 是否显示裁剪区域，默认true
    showCropGrid: false,       // 是否隐藏裁剪区域网格，默认false
    quality: 90,               // 压缩质量
    enableBase64: false,       // 是否返回base64编码，默认不返回
};
const {RNSyanImagePicker} = NativeModules;

const {width} = Dimensions.get('window');

//todo 场景选择
export default class ScenePage extends BasePage {


    constructor(props) {
        super(props);
        this.state = {
            ...this.state,
            head: require('./images/head.png'),

            imageurl: require('./images/scene_quick_01.png'),
            name: '',
            title: '离家模式',
            isback: false

        };

    }


    componentWillMount() {


        DeviceEventEmitter.addListener('allfanhui', (dic) => {

            this.setState({
                imageurl: dic == 1 ? require('./images/allone.png') :
                    dic == 2 ? require('./images/alltwo.png') :
                        dic == 3 ? require('./images/allthree.png') :
                            dic == 4 ? require('./images/allfive.png') :
                                dic == 5 ? require('./images/allsix.png') :
                                    dic == 6 ? require('./images/allsenver.png') :
                                        dic == 7 ? require('./images/alleight.png') :
                                            dic == 8 ? require('./images/allnine.png') :
                                                dic == 9 ? require('./images/alline2.png') :
                                                    dic == 10 ? require('./images/allten.png') :
                                                        dic == 11 ? require('./images/alleleven.png') :
                                                            require('./images/alltwl.png'),

                isback: true
            })


        })

        this.showLoad(true)
        setTimeout(this.openApp.bind(this), 2000);
    }

    openApp() {
        this.showLoad(false)
    }

    aa() {
        Alert.alert('退出场景编辑', '当前场景尚未保存，是否要退出页面？', [{
            text: '取消',
            onPress: () => console.log('Cancel Pressed'),
            style: 'cancel'
        }, {
            text: '确认', onPress: () => {
                this.navigator.pop();

            }
        },])

    }

    renderNavigationBar() {
        return (
            <NavigationBar
                style={{backgroundColor: 'white',}}

                title={
                    <View style={{
                        flexDirection: 'row',
                        justifyContent: 'center',
                        alignSelf: 'center',

                    }}>
                        <Text style={{
                            fontSize: 20,
                            color: '#333333'
                        }}>场景信息</Text>
                    </View>}

                leftView={<TouchableOpacity
                    onPress={() => {
                        this.state.isback ?
                            this.aa() :
                            this.navigator.pop();


                        // DeviceEventEmitter.emit('my', {text: '刷新'})

                    }}
                >
                    <Image style={{width: 15, height: 15, marginLeft: 20}} source={require('./images/btn_back.png')}/>

                </TouchableOpacity>}
                // rightView={<TouchableOpacity
                //     onPress={() => {
                //
                //     }}
                // >
                //     <Image style={{width: 22, height: 22, marginRight: 20}} source={require('./images/add.png')}/>
                //
                // </TouchableOpacity>}
            />

        );
    }


    _onChangeText(inputData) {
        console.log("输入的内容", inputData);
        //把获取到的内容，设置给showValue
        this.setState({title: inputData});
    }

    _fanhui() {

    }

    renderPage() {


        return (
            <PageView style={{
                flex: 1
            }} hiddenNav={true} fromPage={this} {...this.state}>
                <View style={{
                    flexDirection: 'column',
                    marginTop: 70,
                    flex: 1
                }}>


                    <View style={{
                        flexDirection: 'row',
                        width: screenW,


                    }}>
                        <Image source={require('./images/dengpao.png')}
                               style={{height: 20, width: 20, marginLeft: 15}}/>

                        <Text
                            style={{
                                color: '#666666',
                                fontSize: 13
                            }}>
                            可根据自己的需求设置一键控制多个设备的开关
                        </Text>
                    </View>
                    <View
                        style={{
                            backgroundColor: '#f2f2f2',
                            height: 1,
                            marginLeft: 20,
                            marginRight: 20, marginTop: 5
                        }}
                    />
                    <View style={{
                        flexDirection: 'row',
                        width: screenW,
                        justifyContent: 'center',
                        alignItems: 'flex-end',
                        marginTop: 30,
                        marginBottom: 30


                    }}>
                        <Image source={this.state.imageurl}
                               style={{height: 80, width: 80, marginLeft: 15}}/>

                        <TouchableOpacity
                            onPress={() => {

                                this.navigator.push({
                                    view: <AllPage/>
                                })
                            }}
                        >
                            <Image source={require('./images/rightdown.png')}
                                   style={{height: 15, width: 15, marginLeft: 5, marginTop: 10}}/>
                        </TouchableOpacity>
                    </View>
                    <View style={{
                        flexDirection: 'row',
                        justifyContent: 'center',
                        alignItems: 'center',
                        borderColor: '#666666',
                        borderRadius: 4,
                        borderWidth: 1, marginLeft: 15,
                        marginRight: 15

                    }}>

                        <TextInput
                            underlineColorAndroid='transparent'
                            value={this.state.title}
                            placeholder="请输入名字"


                            style={styles.inputStyle}//input框的基本样式
                            onChangeText={(aa) => {
                                this.setState({title: aa});
                            }}//输入框改变触发的函数
                        />


                    </View>
                    <View style={{
                        justifyContent: 'center',
                        backgroundColor: '#f2f2f2',
                        height: 40

                    }}>
                        <Text

                            style={{
                                marginLeft: 15,
                                textAlign: 'center',
                                color: '#666666',
                                fontSize: 13
                            }}>
                            触发本场景后设备执行以下操作
                        </Text>
                    </View>
                    <TouchableOpacity
                        onPress={() => {

                            this.navigator.push({
                                view: <AddPage/>
                            })
                        }}
                    >
                        <View style={{
                            flexDirection: 'row',
                            justifyContent: 'center',
                            alignItems: 'center',
                            width: screenW,
                            backgroundColor: 'white',
                            height: 40

                        }}>
                            <Image source={require('./images/addthree.png')}
                                   style={{height: 25, width: 25, marginLeft: 15}}/>

                            <Text

                                style={{
                                    marginLeft: 10,
                                    color: '#0ECDAC',
                                    fontSize: 14
                                }}>
                                添加动作
                            </Text>


                        </View>
                    </TouchableOpacity>
                </View>
            </PageView>

        );

    }

    componentDidMount() {
        this.setState({
            refreshing: true,
        })
        setTimeout(() => {
            this.setState({
                refreshing: false,
            })
        }, 3000)
    }


}
let screenW = Dimensions.get('window').width;
let screenH = Dimensions.get('window').height;
// iPhoneX
const X_WIDTH = 375
const X_HEIGHT = 812
const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginBottom: Platform.OS === 'ios' &&
        ((screenH === X_HEIGHT && screenW === X_WIDTH) ||
            (screenH === X_WIDTH && screenW === X_HEIGHT)) ? 34 : null
    },
    title: {
        flexDirection: 'row',
        width: CommonStyle.screenwidth
    },
    title_left: {
        marginLeft: 15,
        alignSelf: 'center'
    },

    title_right: {
        fontSize: 14,
        color: CommonStyle.color_deep_red,
        marginRight: 15,
        alignSelf: 'center'
    },
    button: {
        height: 29,
        width: CommonStyle.screenwidth / 5,
        flexDirection: 'row', justifyContent: 'flex-end',
        borderBottomLeftRadius: 5,
        borderTopLeftRadius: 5,
    },
    button2: {
        height: 29,
        width: CommonStyle.screenwidth / 5,
        flexDirection: 'row',
        borderTopRightRadius: 5,
        borderBottomRightRadius: 5,
    },


    inputStyle: {
        flex: 1,
        marginRight: 15,
        marginLeft: 5,
    }
});
